import React,{Component} from 'react';
import {connect} from 'dva'
import io from 'socket.io-client'
import {InputItem,NavBar,List,Grid} from 'antd-mobile'
import 'antd-mobile/dist/antd-mobile.css'
import {ChatBox} from './style'
import {getChatId} from '../../utils/path'
const socket = io('ws://127.0.0.1:3005')

class chat extends Component{
    constructor(){
        super()
        this.state={
            sendMsg:'',
            msg:[],
            show:false,
        }
    }
    componentWillMount(){
        
    }
    componentDidMount(){
        this.props.dispatch({type:'user/getInfos',payload:this.props.match.params.user});
        //this.props.dispatch({type:'user/getAvatar',payload:this.props.match.params.user});
        socket.on('receiveMsg',(data)=>{
            console.log(data);
            var n = data.to == this.props.user_id?1:0
            this.props.dispatch({type:'chat/addItem',payload:{data:data,n:n}});
        });
        //获取所有聊天列表
        this.props.dispatch({type:'chat/getChatList'});
    }
    handleChange(v){
        //console.log(v)
        this.setState({
            sendMsg:v
        })
    }
    handleSubmit(v){
        //console.log(this.state.sendMsg);
        var from = this.props.user_id;
        var to = this.props.match.params.user;
        //console.log(from,to);
        socket.emit('sendMsg',{text:this.state.sendMsg,from:from,to:to});
        this.setState({
            sendMsg:''
        });
        //console.log(v);
    }
    render(){
        //const otherAvatar = this.props.otherAvatar;
        //console.log(otherAvatar);
        const emoji = '❤️ 😂 😍 🤔 😊 😏 😌 😌 🤕'.split(' ').filter(v=>v).map(v=>({text:v}));
        const userid = getChatId(this.props.user_id,this.props.match.params.user);
        const chatmsg = this.props.chatMsg.filter(v=>v.chatid == userid)
        return(
            <ChatBox>
                <NavBar
                    mode="dark"
                    leftContent="Back"
                    onClick={()=>{
                        //console.log(this.props.history);
                        this.props.history.goBack();
                    }}
                    >{this.props.user}</NavBar>
                {
                  chatmsg.map((item)=>{
                       const avatar = require(`../../static/images/${this.props.avatar}.png`)
                       const otherAvatar = require(`../../static/images/${this.props.otherAvatar}.png`)
                       return item.from == this.props.user_id?(
                        <List className="my-list" key={item._id}>
                            <List.Item  extra={<img src={avatar}></img>}><span style={{position:"absolute",right:'50px',lineHeight:'0px'}}>{item.content}</span></List.Item>
                        </List>
                       ):(
                        <List className="my-list" key={item._id}>
                            <List.Item
                           thumb={otherAvatar}
                            >{item.content}</List.Item>
                        </List>
                       )
                   })
                }
                <div className='my-div'>
                <InputItem className='my-input'
                    extra={
                        <div>
                            <span onClick={()=>{this.setState({show:!this.state.show})}}>😂</span>
                            <span onClick={(v)=>{this.handleSubmit(v)}}>发送</span>
                        </div>
                    }
                    onChange={(v)=>{this.handleChange(v)}}
                    value={this.state.sendMsg}
                >
                </InputItem>
                {
                     this.state.show?( <Grid className='my-emoji'
                     data={emoji}
                     columnNum={8}
                     carouselMaxRow={4}
                    onClick={(v)=>{this.setState({
                        sendMsg:this.state.sendMsg+v.text
                    })}}
                 />):null
                }
               
                </div>
            </ChatBox>
        )
    }
}
const mapStateProps = (state)=>{
    return{
       user_id:state.user.user_id,
       chatMsg:state.chat.chatMsg,
       user:state.user.username,
       avatar:state.user.avatar,
       otherAvatar:state.user.otherAvatar,
    }
}
export default connect(mapStateProps)(chat)
